<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>i-Vis&thinsp;Plant</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <!-- jQuery UI -->
        <link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet">

        <link href="css/jquery.fancybox-1.3.4.css" rel="stylesheet">

        <!-- Loading Bootstrap -->
        <link href="css/bootstrap.css" rel="stylesheet">

        <!-- Loading cytoscape.js plugins -->
        <link href="css/cytoscape.js-panzoom.css" rel="stylesheet" type="text/css" />
        <link href="css/font-awesome-4.0.3/css/font-awesome.css" rel="stylesheet" type="text/css" />
        <link href="css/jquery.qtip.min.css" rel="stylesheet" type="text/css" />

        <link href="css/sbgn-viz.css" rel="stylesheet">
        <link rel='stylesheet' href='css/spectrum.css' />



    </head>

    <body>

        <div class="nav-menu">
            <nav class="navbar navbar-default sbgn-nav-bar" role="navigation">
                <div>
                    <ul class="nav navbar-nav">

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                File 
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <input id="file-input" type="file" style="display:none" />
                                <li><a href="#" type="file" id="load-file">Load...</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Samples
                                        <b class="right-caret"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" id="load-sample0">Sample 1</a></li>

                                    </ul>
                                </li>
                                <li><a href="#" id="save-as-sbgnml">Save...</a></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Save as Image 
                                        <b class="right-caret"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" id="save-as-png">PNG</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>


                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Layout 
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" id="perform-layout">Perform Layout</a></li>
                                <li><a href="#" id="layout-properties">Layout Properties...</a></li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Edit 
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" id="add-node">Add Node</a></li>
                                <li><a href="#" id="add-edge">Add Edge</a></li>
                                <li class="divider"></li>
                                <li><a href="#" id="delete-selected">Delete Selected</a></li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                View 
                                <b class="caret"></b>
                            </a>

                            <ul class="dropdown-menu">
                                <li><a href="#" id="hide-selected">Hide Selected</a></li>
                                <li><a href="#" id="show-selected">Show Selected</a></li>
                                <li><a href="#" id="show-all">Show All</a></li>
                                <li class="divider"></li>
                                <li class="dropdown">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        Show Labels
                                        <b class="right-caret"></b>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <li><a href="#" id="show-labels-full">Complete</a></li>
                                        <li><a href="#" id="show-labels-short">Shortened</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Highlight 
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" id="neighbors-of-selected">Neighbors of Selected</a></li>
                                <li><a href="#" id="remove-highlights">Remove Highlights</a></li>

                            </ul>
                        </li>

                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Legends 
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#" id="node-legend">Node Legend</a></li>
                                <li><a href="#" id="edge-legend">Interaction Legend</a></li>
                            </ul>
                        </li>


                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                Help 
                                <b class="caret"></b>
                            </a>
                            <ul class="dropdown-menu">
                                <li><a href="#">How to Use</a></li>
                                <li><a href="#" id="about">About</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>

        <div id="sbgn-info-content">
            <table width="100%" height="100%" align="center" valign="center">
                <tr>
                    <td>
                        <span class="input-file" id="file-name"></span>
                    </td>
                    <td>
                        <span class="sbgn-label"><i>i-Vis</i> Plant</span>
                    </td>
                </tr>
            </table>
        </div>

        <div id="sbgn-network-container">
            <div id="cy" >
            </div>
        </div>

        <div id="sbgn-layout-table" title="Layout Properties">
            <!-- sbgn layout table will be shown here -->
        </div>

        <div id="sbgn-newNode-table" title="Layout Properties">
            <!-- sbgn layout table will be shown here -->
        </div>

        <div id="sbgn-node-add" title="Layout Properties">
            <!-- sbgn node addition table will be shown here -->
        </div>

        <div id="biogene-container" style="display: none">
        </div>

        <div id="box">
        </div>

        <!-- templates -->
        <script type="text/template" id="node-legend-template">
            <div class="sbgn-frame">
            <h2 class="sbgn-text">Node Legend</h2>
            <img src="images/node_legend_sbgn.png" alt="" class="centered">
            </div>
        </script>

        <script type="text/template" id="edge-legend-template">
            <div class="sbgn-frame">
            <h2 class="sbgn-text">Interaction Legend</h2>
            <img src="images/interaction_legend_sbgn.png" alt="" class="centered">
            </div>
        </script>

        <script type="text/template" id="about-template">
            <div class="sbgn-frame">
            <h2 class="sbgn-text">About</h2>

            <table width="100%" height="100%" align="center" valign="center">
            <tr><td>
            <img src="images/i-vis.png" alt="" class="centered">
            </td></tr>

            <tr><td>
            <img src="images/cbio.png" alt="" class="centered">
            </td></tr>

            <tr><td>
            <p class="sbgn-text">SBGN<i>Viz</i>.js version 1.0</p>
            </td></tr>

            <tr><td>
            <p class="address-text marg">i-Vis information Visualization Group</p>
            <p class="address-text">Bilkent University, Ankara, Turkey</p>
            </td></tr>

            <tr><td>
            <p class="address-text marg">Memorial Sloan-Kettering Cancer Center</p>
            <p class="address-text">New York, USA</p>
            </td></tr>

            <tr><td>
            <p class="address-text marg">
            <a href="mailto:ivis@cs.bilkent.edu.tr" target="_top">ivis@cs.bilkent.edu.tr</a>
            </p>
            <p class="address-text">
            <a href="https://code.google.com/p/sbgnviz-js" target="_blank">https://code.google.com/p/sbgnviz-js</a>
            </p>
            </td></tr>
            </table>
            </div>
        </script>

        <script type="text/template" id="loading-small-template">
            <p class="sbgn-text"> <%= name %> </p>
            <img class="centered" src="images/loading-small.gif" height="auto" width="auto" align="middle">
        </script>

        <script type="text/template" id="layout-settings-template">
            <table class="table-condensed layout-table">

            <tr>
            <td>
            <span class="add-on layout-text"> Padding </span>
            </td>
            <td>
            <input id="padding" type="text" class="input-small layout-text" value= <%= padding %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Refresh </span>
            </td>
            <td>
            <input id="refresh" type="text" class="input-small layout-text" value= <%= refresh %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Fit </span>
            </td>
            <td>
            <input id="fit" type="text" class="input-small layout-text" value= <%= fit %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Randomize </span>
            </td>
            <td>
            <input id="randomize" type="text" class="input-small layout-text" value= <%= randomize %> >
            </td>
            </tr>


            <tr>
            <td>
            <span class="add-on layout-text"> Node Repulsion </span>
            </td>
            <td>
            <input id="node-repulsion" type="text" class="input-small layout-text" value= <%= nodeRepulsion %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Node Overlap </span>
            </td>
            <td>
            <input id="node-overlap" type="text" class="input-small layout-text" value= <%= nodeOverlap %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Ideal Edge Length </span>
            </td>
            <td>
            <input id="ideal-edge-length" type="text" class="input-small layout-text" value= <%= idealEdgeLength %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Edge Elasticity </span>
            </td>
            <td>
            <input id="edge-elasticity" type="text" class="input-small layout-text" value= <%= edgeElasticity %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Nesting Factor </span>
            </td>
            <td>
            <input id="nesting-factor" type="text" class="input-small layout-text" value= <%= nestingFactor %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Gravity </span>
            </td>
            <td>
            <input id="gravity" type="text" class="input-small layout-text" value= <%= gravity %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Number of Iterations </span>
            </td>
            <td>
            <input id="num-iter" type="text" class="input-small layout-text" value= <%= numIter %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Initial Temperature </span>
            </td>
            <td>
            <input id="initial-temp" type="text" class="input-small layout-text" value= <%= initialTemp %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Cooling Factor </span>
            </td>
            <td>
            <input id="cooling-factor" type="text" class="input-small layout-text" value= <%= coolingFactor %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Minimum Temperature </span>
            </td>
            <td>
            <input id="min-temp" type="text" class="input-small layout-text" value= <%= minTemp %> >
            </td>
            </tr>

            <tr id="layout-buttons">
            <td>
            <button id="save-layout" class="btn btn-default" >Save</button>
            </td>
            <td>
            <button id="default-layout" class="btn btn-default">Default</button>
            </td>
            </tr>
            </table>
        </script>

        <script type="text/template" id="node-addition-template">
        <table class="table-condensed layout-table">

            <tr>
            <td>
            <span class="add-on layout-text"> Short Name </span>
            </td>
            <td>
            <input id="short-name" type="text" class="input-medium layout-text" value= <%= shortname %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Name </span>
            </td>
            <td>
            <input id="node-name" type="text" class="input-medium layout-text" value= <%= nodeName %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Shape </span>
            </td>
            <td>

              
            <select id="shape" type="text" class="input-medium layout-text" value= <%= shape %>>
                <option value="rectangle">Rectangle</option>
                <option value="roundrectangle">Rounded Rectangle</option>
                <option value="ellipse">Ellipse</option>
                <option value="triangle">Triangle</option>
                <option value="pentagon">Pentagon</option>
                <option value="hexagon">Hexagon</option>
                <option value="heptagon">Heptagon</option>
                <option value="octagon">Octagon</option>
                <option value="star">Star</option>
            </select>
            
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Weight </span>
            </td>
            <td>
            <input id="weight" type="text" class="input-medium layout-text" value= <%= weight %> >
            </td>
            </tr>

            <tr>
            <td>
            <span class="add-on layout-text"> Color </span>
            </td>
            <td>
            <input id='picker' type='color' class='input-medium basic' />
            </td>
            </tr>
    
            <tr id="layout-buttons">
            <td>
            <button id="add-new-node" class="btn btn-default" >Add</button>
            </td>
            <td>
            <button id="cancel-node" class="btn btn-default">Cancel</button>
            </td>
            </tr>
            </table>
        
        </script>

        <!-- Node inspector template for backbone.js -->
        <script type="text/template" id="node-inspector-template">
                <div class='node-details-text'>
                    <table class="table table-condensed table-striped" cellspacing="10">
                        <tr class="biogene-info biogene-aliases">
                            <th valign="top">Short Name:</th>
                            <td>
                                <%=shortName %>
                            </td>
                        </tr>
                        <tr class="biogene-info biogene-description">
                            <th>Name:</th>
                            <td class="expandable">
                                <%=nodeName %>
                            </td>
                        </tr>
                        <tr class="biogene-info biogene-location">
                            <th valign="top">Node Shape:</th>
                            <td>
                                <%=shape %>
                            </td>
                        </tr>
                        <tr class="biogene-info biogene-uniprot-links">
                            <th valign="top">Node Weight:</th>
                            <td>
                                <%=weight %>
                            </td>
                        </tr>
                        <tr class="biogene-info biogene-id">
                            <th valign="top">Color:</th>
                            <td>
                                <%=color %>
                            </td>
                        </tr>

                        <tr id="node-edit-buttons">
                            <td>
                                <button id="change-node" class="btn btn-default" >Change</button>
                            </td>
                            <td>
                            </td>
                        </tr>
                    </table>
                </div>
        </script>


        <script type="text/template" id="uniprot-link-template">
            <a href="http://www.uniprot.org/uniprot/<%= id %>" target="_blank">
            <%=id %>
            </a>
        </script>

        <script type="text/template" id="noty-info">
            Right click to a node to see its detailed information
        </script>


        <script src="js/libraries/jquery-1.8.2.min.js"></script>
        <script src="js/libraries/jquery.fancybox-1.3.4.pack.js"></script>
        <script src="js/libraries/jquery.expander-min.js"></script>
        <script src="js/libraries/jquery.qtip.min.js"></script>
        <script src="js/libraries/bootstrap.min.js"></script>
        <script src="js/libraries/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="js/libraries/underscore.js"></script>
        <script src="js/libraries/backbone-min.js"></script>
        <!--<script src="js/libraries/cytoscape.min.js"></script>-->
        <script src="js/libraries/cytoscape.js"></script>
        <script src="js/libraries/cytoscape.js-panzoom.js"></script>
        <script src="js/libraries/cytoscape.js-qtip.js"></script>
        <script src="js/libraries/FileSaver.js"></script>
        <script src="js/libraries/jquery.noty.packaged.min.js"></script>
        <script src='js/libraries/spectrum.js'></script>

        <!-- Loading edge handle plugin -->
        <script src="js/libraries/cytoscape.js-edgehandles.js"></script>

        <script src="js/extensions/cytoscape.layout.tiled-cose.js"></script>

        <script src="js/utils/sbgn-filtering.js"></script>

        <script src="js/components/sample-app-cytoscape-sbgn.js"></script>
        <script src="js/components/sample-app-menu-functions.js"></script>
        <script src="js/components/txt-json.js"></script>
    </body>
</html>